@vonage/vvd-core
Advanced tools
Vivid content may be consumed on different levels.
One may consume a single component, like vwc-button, vwc-dialog etc.
Another use might be to init a common context via vvd-context service to style a common HTML native semantics like H1, p etc.
Any of those involves internal mechanics initialization: fetching fonts for typography, initializing schemes for a theming / scheme management etc. We call those vivid core.
There is a lifecycle here. We've designed Vivid lifecycle to be self-contained, agnostic to other contexts and to not interfere nor require alignment to the existing application lifecycle or any other framework in place.
The chart below represents a general runtime initialization flow, while separating the system into the consumer-visible realm and the underlying platform.
Consumer realm's items are to be consumed by the hosting applications directly (API / imports etc). Below the line are the core parts of our system which are transparent to the consumer in vast majority of cases.
vivid core initialization may go 2 main paths:
In order to allow ourselves and consuming applications to run code after initialization is done, vivid core exposes a settled Promise. This Promise will resolve once all the core services are done and ready.
Important: in case of manual initialization,
settledwill be immediately rejected.
import vvdCore from '@vonage/vvd-core.js';
...
vvdCore.settled.then(() => {
// do whatever after the init, eg remove the loading "curtain"
});
Most obvious use of the settled is to remove the loading veil, which could be put over the site in order to prevent FOUC (flash of unstyled content).
If consuming application took no special action, the first use of the Vivid's component/s will auto initialize the vivid core.
All the vivid core services auto-initialize to default values if not specified otherwise.
In order to help Vivid to initialize itself to some specific state, consuming application should use data-vvd-context attribute on html element.
The below example will auto-initialize vivid core with the dark theme.
<html data-vvd-context="theme:dark">
...
Important: the attribute is being examined at the moment of initialization ONLY, so it should be in place BEFORE the initialization performed. We suggest using this feature as a purely static setup OOTB.
Advanced consumer might like to manage the visual application state (we mean Vivid's part, eg theming) as per user setting.
This case would involve an async work to be done client side, eg fetching personalized settings from the server or from a local storage like IndexedDB.
Init with none keyword designed exactly for that. It will prevent auto init of the vivid core. It can be done in the following manner:
Set the data-vvd-context to none in HTML:
<html data-vvd-context="none">
...
Use the vivid core API to set configuration dynamically:
import vvdCore from '@vonage/vvd-core.js';
vividCore
.set({
scheme: 'dark'
})
.then(() => {
// do whatever after applying configuration
});
Pay attention: set API is not limited to the init use case only, it may be used for any runtime (re-)configuration of the Vivid overlay.
Reminder:
settledPromise of the vivid core is immediately rejected when none initialization flavor is used.
2.46.1 (2024-11-06)
Note: Version bump only for package @vivid/root
FAQs
> TODO: description
The npm package @vonage/vvd-core receives a total of 546 weekly downloads. As such, @vonage/vvd-core popularity was classified as not popular.
We found that @vonage/vvd-core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."